<%-- 
    Document   : Home
    Created on : Nov 14, 2013, 4:56:13 PM
    Author     : toan_pc
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>National Level Paper Presentation</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('a.login-window').click(function() {

                    // Getting the variable's value from a link 
                    var loginBox = $(this).attr('href');

                    //Fade in the Popup and add close button
                    $(loginBox).fadeIn(300);

                    //Set the center alignment padding + border
                    var popMargTop = ($(loginBox).height() + 24) / 2;
                    var popMargLeft = ($(loginBox).width() + 24) / 2;

                    $(loginBox).css({
                        'margin-top': -popMargTop,
                        'margin-left': -popMargLeft
                    });

                    // Add the mask to body
                    $('body').append('<div id="mask"></div>');
                    $('#mask').fadeIn(300);

                    return false;
                });

                // When clicking on the button close or the mask layer the popup closed
                $('a.close, #mask').live('click', function() {
                    $('#mask , .login-popup').fadeOut(300, function() {
                        $('#mask').remove();
                    });
                    return false;
                });
            });
        </script>
        <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html" />
    </head>
    <body>

        <!-- start login--> 
        <div>  
            <div class="post" style="margin-left:420px">
                <div class="btn-sign">
                    <a href="#login-box" class="login-window">Login</a>
                </div>
            </div>

            <div id="login-box" class="login-popup">
                <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
                <form method="post" class="signin" action="checkLogin">
                    <fieldset class="textbox">
                        <label class="username">
                            <span>Username or email</span>
                            <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                        </label>

                        <label class="password">
                            <span>Password</span>
                            <input id="password" name="password" value="" type="password" placeholder="Password">
                        </label>

                        <button class="submit button" type="button">Sign in</button>

                        <p>
                            <a class="forgot" href="#">Forgot your password?</a>
                        </p>

                    </fieldset>
                </form>
            </div>

        </div>
        <!-- end login-->
        <div id="header">
            <div> <a href="index.html" id="logo"><img src="images/logo.png" alt="logo"></a>
                <ul>
                    <li class="selected"> <a href="Home.jsp">Home</a> </li>
                    <li> <a href="subdivisions.html">Subdivisions</a> </li>
                    <li> <a href="blog.html">Blog</a>
                        <div class="container">
                            <div id="content">
                                <div class="post">
                                    <div class="btn-sign"> <a href="#login-box" class="login-window">Login</a> </div>
                                </div>
                                <div id="login-box" class="login-popup11"> <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
                                    <s:form action="checkLogin" cssClass="signin">
                                    <!--<form method="post" class="signin">-->
                                        <fieldset class="textbox">
                                            <label class="username"> <span>Username or email</span>
                                                <s:textfield id="username" name="admin.adminName" value="" placeholder="Username" />
                                                <!--<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">-->
                                            </label>
                                            <label class="password"> <span>Password</span>
                                                <s:textfield id="password" name="admin.password" value="" placeholder="Password" />
                                                <!--<input id="password" name="password" value="" type="password" placeholder="Password">-->
                                            </label>
                                                <s:submit value="Sign in" cssClass="submit button" name="Sign in" />
                                            <!--<button class="submit button" type="button">Sign in</button>-->
                                            <p> <a class="forgot" href="#">Forgot your password?</a> </p>
                                        </fieldset>
                                    <!--</form>-->
                                    </s:form>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li> <a href="About.jsp">About</a> </li>
                    <li> <a href="Contact.jsp">Contact</a> </li>
                </ul>
            </div>
        </div>
        <div id="body" class="home">
            <div class="blog">
                <img src="images/house.png" alt="">
                <div>
                    <img src="images/kayamura.png" alt="">
                    <h3>This is just a place holder</h3>
                    <p>
                        This website template has been designed by <br> <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this <br> text with your own text. You can remove any link to our website <br> from this website template, you're free to use this website template <br> without linking back to us. If you're having problems editing this <br> website template, then don't hesitate to ask for help on the <br> <a href="http://www.freewebsitetemplates.com/forums/">Forums</a>.
                    </p>
                </div>
            </div>
            <div class="article">
                <div>
                    <h3>This is just a place holder</h3>
                    <p>
                        This website template has been designed by <br> <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free.
                    </p>
                    <p>
                        You can replace all this text with your own text. You can remove <br> any link to our website from this website template, you're free to <br> use this website template without linking back to us.
                    </p>
                    <p>
                        If you're having problems editing this website template, then don't <br> hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forums</a>.
                    </p>
                </div>
                <img src="images/nature-place-photo.png" alt="">
            </div>
            <div class="news">
                <img src="images/eco-park.png" alt="">
                <div>
                    <h3>This is just a place holder</h3>
                    <p>
                        This website template has been designed by <br> <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this <br> text with your own text. You can remove any link to our website <br> from this website template, you're free to use this website template <br> without linking back to us.
                    </p>
                    <p>
                        If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forums</a>.
                    </p>
                </div>
            </div>
        </div>
        <div id="footer">
            <div>
                <p>
                    &#169; 2023 Tree Valley. All Rights Reserved.
                </p>
                <div class="connect">
                    <a href="http://freewebsitetemplates.com/go/googleplus/" id="googleplus">google+</a> <a href="http://www.freewebsitetemplates.com/misc/contact" id="contact">contact</a> <a href="http://freewebsitetemplates.com/go/facebook/" id="facebook">facebook</a> <a href="http://freewebsitetemplates.com/go/twitter/" id="twitter">twitter</a>
                </div>
            </div>
        </div>
    </body>
</html>

